import React, { Component } from 'react';
// import { Link } from 'react-router-dom';
import './Banner.scss';
// import $ from 'jQuery';

 class Banner extends Component {
    constructor (props) {
        super(props)
        this.state = {
            // title:['流行指数','热歌','新歌','欧美','韩国'],
            aa : [],
            bb : [],
            cc : [],
            dd : [],
            ee : []
        }
    }
    // seek (e, index) {
    //     // console.log(e)
    //     fetch('https://api.bzqll.com/music/netease/search?key=579621905&s='+e+'&type=song&limit=3&offset=0')
    //         .then(res => res.json())
    //         .then(data => {
    //             console.log(data.data[0].id)
    //         }) 
    // }
    goDetail (id) {
        console.log(this.props)
        this.props.history.push('/player/' + id)
    }
    componentDidMount () {
        fetch('https://api.bzqll.com/music/netease/search?key=579621905&s=流行&type=song&limit=3&offset=0')
            .then(res => res.json())
            .then(data => {
                // console.log(data)
                this.setState({
                    aa : data.data
                })
                // console.log(this.state.aa)
            })
            fetch('https://api.bzqll.com/music/netease/search?key=579621905&s=热歌&type=song&limit=3&offset=0')
            .then(res => res.json())
            .then(data => {
                // console.log(data)
                this.setState({
                    bb : data.data
                })
            })
            fetch('https://api.bzqll.com/music/netease/search?key=579621905&s=新歌&type=song&limit=3&offset=0')
            .then(res => res.json())
            .then(data => {
                // console.log(data)
                this.setState({
                    cc : data.data
                })
            })
            fetch('https://api.bzqll.com/music/netease/search?key=579621905&s=欧美&type=song&limit=3&offset=0')
            .then(res => res.json())
            .then(data => {
                // console.log(data)
                this.setState({
                    dd : data.data
                })
            })
            fetch('https://api.bzqll.com/music/netease/search?key=579621905&s=韩国&type=song&limit=3&offset=0')
            .then(res => res.json())
            .then(data => {
                // console.log(data)
                this.setState({
                     ee: data.data
                })
            })
    }

    render () {
        return (
          <div className='toplist-box'>
          {/* 流星指数 */}
                <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>流行指数</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.aa.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id } onClick = { this.goDetail.bind(this, item.id) }>
                                        <em>{index}</em>
                                        <p>
                                            <b>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div> 
             {/* 热歌 */}
             <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>热歌</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.bb.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id }>
                                        <em>{index}</em>
                                        <p>
                                            <b onClick = { this.goDetail.bind(this, item.id) }>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
             {/*新歌  */}
             <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>新歌</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.cc.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id }>
                                        <em>{index}</em>
                                        <p>
                                            <b onClick = { this.goDetail.bind(this, item.id) }>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
                {/* 欧美 */}
                <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>欧美</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.dd.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id }>
                                        <em>{index}</em>
                                        <p>
                                            <b onClick = { this.goDetail.bind(this, item.id) }>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
                {/* 韩国 */}
                 <div className='toplist-out'>
                    <div>
                        <p>巅峰榜</p>
                        <h2>韩国</h2>
                        <b>
                            <i className='iconfont icon-move'></i>
                            <i className='iconfont icon-videofill'></i>
                        </b>
                        <ul className='toplist-ul'>
                        {
                            this.state.ee.map((item, index) => {
                                index =index + 1
                                return (
                                    <li key={ item.id }>
                                        <em>{index}</em>
                                        <p>
                                            <b onClick = { this.goDetail.bind(this, item.id) }>{item.name}</b>
                                            <b>{item.singer}</b>
                                        </p>
                                        
                                    </li>
                                )
                            })
                        }
                        </ul>
                    </div>
                </div>
          </div>
        )
    }     
 }
export default Banner;